import React from 'react';
import styles from './CourseDetail.css';
import { Input,Icon,Spin,Button,Tabs, Modal, message,Affix,notification } from 'antd';
import 'antd/dist/antd.css'
const Search = Input.Search;
import logoImg from '../../assets/logo.png'
import catIcon from '../../assets/catIcon.jpg'
import searchIcon from '../../assets/searchIcon.png'
import arrowRight from '../../assets/arrowRight.png'
import miniAppCode from '../../assets/miniAppCode.jpg'
import homeWorkIcon from '../../assets/homeWork.png'
import liveIcon from '../../assets/live.png'
import materialIcon from '../../assets/material.png'
import triangleIcon from '../../assets/triangle.png'

import playBackIcon from '../../assets/playBack.png'
import recordPlayIcon from '../../assets/recordPlay.png'



import pageRight from '../../assets/pageRight.png'
const TabPane = Tabs.TabPane;
import {getcookie} from '../../utils/cookies'
import {HOMEPAGE_URL} from '../../utils/constants'
const  imgVideoPicUrl = "https://image.huanqiushuju.com/"

class CourseDetail extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      arrowArr:[{arrowText:'首页',id:1,arrowIcon:searchIcon},
        {arrowText:'课程详情',id:2,arrowIcon:searchIcon},
      ],
      //分类
      typeList:[{typeName:'全部',typeNameId:1},{typeName:'英语',typeNameId:2},
        {typeName:'政治',typeNameId:3},{typeName:'数学',typeNameId:4},
        {typeName:'专业课',typeNameId:5},],
      clicktypeNameId:-1,
      loading:false,
      pageTextList:[{pageText:1,pageId:1},{pageText:2,pageId:2},
        {pageText:3,pageId:3},],
      clickPageId:-1,courseId:-1,
      signModalVisible:false,queryModalVisible:false,getBriState:null,
      courseBriInfo:{teacherBriList:[{imgUrl:'',realName:'',teacherIntroduction:''}],
        course:{courseImgName:'',courseDetailImgUrl:'',consultTeacher:{phone:1,wechatNumber:1,imgUrl:''}},classList:[]},
      unionid:"",chapterList:[],curLiveList:[],spinLoading:false,
    }
  }
  componentWillMount(){
    let courseId = getcookie("courseId")
    // console.log("---------------courseId11111",courseId)
    let unionid = getcookie("unionid")


    if (unionid != null && unionid != '' && unionid != undefined) {
      this.setState({getBriState:true, unionid:unionid, courseId:courseId, spinLoading:true,getChapterState:true})
      let getBriState = true
      this.props.dispatch({type:"courseDetail/getcourseBri",payload:{courseId,getBriState,unionid}})


      let getChapterState = true

      this.props.dispatch({type:"courseDetail/getChapterInfo",payload:{courseId,getChapterState,unionid}})


    } else {
      window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

    }

  }
  clickLiveTask(bindInfo){
    // console.log("----------bindInfo",bindInfo)
    let that = this
    let bindTabInfo = bindInfo
    let curTime = new Date().getTime()
    // console.log("---------curTime",curTime)
    // bindTabInfo.url = "http://zhibo.youniwote.com/starf/ynwt.m3u8"
    // let newUrl = bindTabInfo.url.replace("flv", "m3u8")
    // this.props.dispatch({type:"courseDetail/goToLive",payload:{newUrl}})
    let tipsGapsTime = 5*60*1000
    let tipStartTime = bindTabInfo.starttime - tipsGapsTime
    if (bindTabInfo.state == true) {
      if (tipStartTime <= curTime) {
        if (bindTabInfo.url == undefined || bindTabInfo.url == '' || bindTabInfo.url == null) {

          notification.open({
            message: '温馨提示',
            description: '获取直播失败，请刷新重试，刷新后还不行请退到首页后重新进来哦',
            duration: 0,

            icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
          });

        } else {

            // bindTabInfo.url = "http://zb.youniwote.com/starf/ynwt.m3u8"
          let liveVideoUrl = bindTabInfo.url.replace("flv", "m3u8")
          this.props.dispatch({type:"courseDetail/goToLive",payload:{liveVideoUrl}})
          // console.log("------------newUrl-", newUrl)
        }
      } else {
        notification.open({
          message: '温馨提示',
          description: '请于本节直播开始前5分钟进入环球云逸小程序或在电脑端登陆www.yunyiweilai.com收看本节直播哦~~',
          duration: 0,
          icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
        });
      }


    } else {
      notification.open({
        message: '温馨提示',
        description: '您需要报名才可以观看哦',

      });
    }
  }










  componentDidUpdate(){
    let props = this.props.courseDetail
    if (props.getBriState == true && this.state.getBriState == true) {
      // console.log("------this.props.courseDetail.courseBriInfo-----",this.props.courseDetail.courseBriInfo)
      this.setState({getBriState:false,courseBriInfo:this.props.courseDetail.courseBriInfo, spinLoading:false})

      let getBriState = false
      this.props.dispatch({type:"courseDetail/resetState",payload:{getBriState}})
    }
    if (props.getChapterState == true && this.state.getChapterState == true) {
      // if (this.props.courseDetail.curLiveList.length == 0) {
      //   message.warning("当前没有直播")
      // }
      this.setState({getChapterState:false,chapterList:this.props.courseDetail.chapterList,
      curLiveList:this.props.courseDetail.curLiveList, spinLoading:false})
      let getBriState = false
      this.props.dispatch({type:"courseDetail/resetState",payload:{getBriState}})
    }

  }



  render(){
    // console.log("-----this.props---render",this.props)
    // console.log("-----this.state---render",this.state.courseBriInfo)
    let courseBriInfo = this.props.courseDetail.courseBriInfo
    let chapterList = this.props.courseDetail.chapterList
    // console.log("-----chapterList---render",this.state.chapterList)
    // console.log("-----chapterList---render",this.state.curLiveList)
    return(
      <div className={styles.allContent}>
        <Spin spinning={this.state.spinLoading}>

        <div className={styles.contentBottom}>
          <div className={styles.contentFlex}>
            <Affix>
            <div className={styles.topHeader}>

              <div className={styles.headerLeft}>
                <img className={styles.logoImg} src={logoImg} alt="logo"/>
                <h3 className={styles.courseHead}>环球云逸课堂</h3>
                <Input
                  placeholder="输入搜索内容"
                  className={styles.searchInput}
                  style={{ width: 200 }}

                />
                <div className={styles.searchIconBac}>
                  <img className={styles.searchIcon} src={searchIcon} alt="搜索"/>
                </div>
              </div>

              <div className={styles.headerRight}>
                <div      onClick={()=>{
                  {/*console.log("-----------------")*/}
                  let unionid = getcookie("unionid")
                  if (unionid != '' && unionid != undefined && unionid != null) {
                    this.props.dispatch({type:"index/indexToMycourse",payload:{unionid}})
                  } else {
                    window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

                  }
                }}>我的课程</div>
                {/*<div>通知</div>*/}
                {/*<img className={styles.avateIcon} src={logoImg} alt="logo"/>*/}
              </div>

            </div>
            </Affix>
          </div>
        </div>

        <div className={styles.flexContent}>
          <div className={styles.Allcourse}>

            {/*<div className={styles.typeHeader}>*/}
              <Affix className={styles.typeHeader} offsetTop={36}>
              <div className={styles.arrowText}>
                {
                  this.state.arrowArr.map((item)=>{
                    return (
                      <div key={item.arrowText} className={styles.arrowContent} onClick={()=>{
                        this.props.dispatch({type:"courseDetail/goBack",payload:{item}})
                      }}>
                        <div className={item.id == 2?styles.arrowRightTextBlue:styles.arrowRightText}>{item.arrowText}
                          <img className={item.id == 2?styles.arrowRightNone:styles.arrowRight} src={arrowRight} alt=""/></div>

                      </div>
                    )
                  })
                }

              </div>
              </Affix>

            {/*</div>*/}

          </div>


          <div className={styles.centerContent}>

            <div className={styles.coverImgContent}>
              <img className={styles.coverImg} src={courseBriInfo.course.courseImgName} alt="课程封面"/>
            </div>

              <div className={styles.coverCourseText}>
                <div className={styles.coverText}>
                  {courseBriInfo.course.courseName}
                </div>
                <div className={styles.coverText}>
                  <text className={styles.signedNum}>{courseBriInfo.course.salesNum}</text> <text className={styles.signedText}>人已报名</text>
                </div>
                <div className={styles.signEndTime}>
                  <text  className={styles.signedText}>报名截止时间:{courseBriInfo.course.courseBeginTime}</text>
                </div>
                <div className={styles.coverCash}>
                  <div className={styles.coverCashText}>
                    <text>原价：{courseBriInfo.originLowerPrice}-{courseBriInfo.originHeightPrice}</text><text >
                    现价：<text className={styles.nowCashText}>{courseBriInfo.lowerPrice}-{courseBriInfo.heighterPrice}</text> </text>
                  </div>
                  <div className={styles.coverCashText}>
                    <text>逸贝：{courseBriInfo.originLowerYcoin}-{courseBriInfo.originHeighterYcoin}</text>
                    <text >逸贝：<text className={styles.nowCash}>{courseBriInfo.lowerYcoin}-{courseBriInfo.heighterYcoin}</text> </text>
                  </div>
                </div>
                <div className={styles.coverBtn}>
                  <div className={styles.signBtn}>
                    <Button onClick={()=>{
                      this.setState({signModalVisible:true})
                    }}>立即报名</Button>
                    <Modal visible={this.state.signModalVisible} onCancel={()=>{
                      this.setState({signModalVisible:false})
                    }} onOk={()=>{this.setState({signModalVisible:false})}}>
                      <div className={styles.signBtnInfo}>
                        <text>请用微信扫描以下二维码，到小程序端，点击'去听课'报名课程哦</text>
                        <img src={miniAppCode} alt="二维码"/>
                      </div>
                    </Modal>

                  </div>
                  <div className={styles.queryBtn}>
                    <div onClick={()=>{
                      this.setState({queryModalVisible:true})
                    }}>在线咨询</div>
                    <Modal visible={this.state.queryModalVisible} onOk={()=>{this.setState({queryModalVisible:false})}}
                    onCancel={()=>{this.setState({queryModalVisible:false})}}>
                      <div className={styles.queryBtnInfo}>
                        <text>有什么疑问请按照以下联系方式联系志愿者客服哦</text>
                        <text>手机：<div>{courseBriInfo.course.consultTeacher.phone}</div></text>
                        <text>微信号：<div>{courseBriInfo.course.consultTeacher.wechatNumber}</div></text>
                        <img src={courseBriInfo.course.consultTeacher.imgUrl} alt=""/>

                      </div>
                    </Modal>

                  </div>

                </div>
              </div>

            <div>



            </div>

          </div>
          <div className={styles.courseBriContent}>
            <div className={styles.tabContent}>
              <Tabs defaultActiveKey="1" onTabClick={(e)=>{
                {/*console.log("-------------e",e)*/}
                if (e == 1){
                  this.setState({getBriState:true,spinLoading:true})
                  let courseId = this.state.courseId
                  let getBriState = true
                  let unionid = this.state.unionid
                  this.props.dispatch({type:"courseDetail/getcourseBri",payload:{courseId,getBriState,unionid}})
                }
                if (e == 2) {
                  this.setState({getChapterState:true, spinLoading:true})
                  let courseId = this.state.courseId
                  let getChapterState = true
                  let unionid = this.state.unionid
                  this.props.dispatch({type:"courseDetail/getChapterInfo",payload:{courseId,getChapterState,unionid}})
                }
                if (e == 4) {
                  this.setState({getChapterState:true, spinLoading:true})

                  let courseId = this.state.courseId
                  let getChapterState = true
                  let unionid = this.state.unionid

                  this.props.dispatch({type:"courseDetail/getChapterInfo",payload:{courseId,getChapterState,unionid}})
                }

              }} onChange={(e)=>{
                {/*console.log("-------------e--------------",e)*/}
              }}  type="card"  className={styles.tabCard}>
                <TabPane tab="课程总览" key="1">
                  <div className={styles.tabPane1}>

                    <div className={styles.briHeader}>

                      <div className={styles.briHeaderText}>
                        <div className={styles.circle}>
                          <span></span>
                        </div>
                        <text className={styles.briText}>课程简介</text>
                      </div>

                      <div className={styles.courseBriText}>
                        {courseBriInfo.course.courseBri}

                      </div>
                    </div>
                    <div className={styles.briHeader}>

                      <div className={styles.briHeaderText}>
                        <div className={styles.circle}>
                          <span></span>
                        </div>
                        <text className={styles.briText}>老师简介</text>
                      </div>

                      <div className={styles.teacherInfo}>
                        {
                          courseBriInfo.teacherBriList.map((item)=>{
                            return (
                              <div className={styles.briHeaderTextTeacher} key={item.teacherId}>
                                <div className={styles.teacherBriImg}>
                                  <img className={styles.teacherAtavar} src={item.imgUrl} alt="老师头像"/>
                                  <text className={styles.teacherName}>{item.realName}</text>
                                </div>
                                <div className={styles.teacherBriText}>
                                  <text>{item.teacherIntroduction}</text>
                                </div>

                              </div>
                            )
                          })

                        }
                      </div>
                    </div>

                    <div className={styles.briHeader}>

                      <div className={styles.briHeaderText}>
                        <div className={styles.circle}>
                          <span></span>
                        </div>
                        <text className={styles.briText}>课程详情</text>
                      </div>

                      <div className={styles.courseBriText}>
                        <img className={styles.courseDetailImg} src={courseBriInfo.course.courseDetailImgUrl} alt="课程详情"/>

                      </div>
                    </div>
                    <div className={styles.briHeader}>

                      <div className={styles.briHeaderText}>
                        <div className={styles.circle}>
                          <span></span>
                        </div>
                        <text className={styles.briText}>班级介绍</text>
                      </div>

                      <div className={styles.courseBriText}>
                        {
                          courseBriInfo.classList.map((item)=>{
                            return (
                              <div className={styles.classBriContent} key={item.classId}>
                                <div className={styles.classNameText}>
                                  <img src={triangleIcon} alt=""/>
                                  <text>{item.className}</text>

                                </div>
                                <div >{item.classBri}</div>

                              </div>
                            )
                          })
                        }

                      </div>
                    </div>

                  </div>



                </TabPane>
                <TabPane tab="课程章节" key="2">
                    <div className={styles.courseChapter}>
                      <div className={styles.sectionContent}>
                        {
                          chapterList.map((item)=>{
                            return (
                              <div key={item.sectionId} className={styles.sectionContentFlex}>
                                <div>
                                  <div className={styles.sectionTitle}>
                                    <div>{item.sectionDefaultName}</div>
                                    <div>{item.sectionTitle}</div>
                                  </div>
                                  {
                                    item.sectionTask.map((i)=>{
                                      let bindInfo = {
                                        url:i.liveVideoUrl,
                                        taskId:i.taskId,
                                        state: i.isPermission,
                                        starttime:i.liveBroadcastTimeFrom,
                                        endtime:i.liveBroadcastTimeEnd
                                      }



                                      if (i.taskType == 'LIVE') {

                                        return (
                                          <div key={i.taskId} onClick={this.clickLiveTask.bind(this,bindInfo)}>
                                            <div className={styles.taskContent}>
                                              <img className={styles.recordPlayIcon} src={liveIcon} alt=""/>
                                              <div className={styles.taskTypeText}>【直播】</div>
                                              <div className={styles.taskTitleText}>{i.taskTitle}</div>
                                              <div className={styles.taskStudyText}>(

                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyDate}</text>
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyStartTime}</text>-
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyEndTime}</text>
                                                <text className={i.taskStateAdd.taskSeeState=='进行中'?styles.taskTextInfoRed:styles.taskTextInfo}>{i.taskStateAdd.taskSeeState}</text>)</div>
                                            </div>
                                          </div>
                                        )
                                      }



                                      if (i.taskType == 'VIDEO') {

                                        return (
                                          <div key={i.taskId}>
                                            <div className={styles.taskContent}>
                                              <img className={styles.recordPlayIcon} src={recordPlayIcon} alt=""/>
                                              <div className={styles.taskTypeText}>【录播】</div>
                                              <div className={styles.taskTitleText}>{i.taskTitle}</div>
                                              <div className={styles.taskStudyText}>(
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyDate}</text>
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyStartTime}</text>-
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyEndTime}</text>
                                                <text className={styles.taskTextInfo}>时长：{i.videoDuration}分</text>
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskSeeState}</text>)</div>
                                            </div>
                                          </div>
                                        )
                                      }
                                      if (i.taskType == 'PLAYBACK') {

                                        return (
                                          <div key={i.taskId}>
                                            <div className={styles.taskContent}>
                                              <img className={styles.recordPlayIcon} src={playBackIcon} alt=""/>
                                              <div className={styles.taskTypeText}>【回放】</div>
                                              <div className={styles.taskTitleText}>{i.taskTitle}</div>
                                              <div className={styles.taskStudyText}>(
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyDate}</text>
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyStartTime}</text>-
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyEndTime}</text>
                                                <text className={styles.taskTextInfo}>时长：{i.videoDuration}分</text>

                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskSeeState}</text>)</div>
                                            </div>
                                          </div>
                                        )
                                      }
                                      if (i.taskType == 'MATERIAL') {

                                        return (
                                          <div key={i.taskId}>
                                            <div className={styles.taskContent}>
                                              <img className={styles.recordPlayIcon} src={materialIcon} alt=""/>
                                              <div className={styles.taskTypeText}>【资料】</div>
                                              <div className={styles.taskTitleText}>{i.taskTitle}</div>
                                              <div className={styles.taskStudyText}>
                                                (

                                                <text className={styles.taskTextInfo}>格式：{i.taskStateAdd.materialFormat}</text>
                                                <text className={styles.taskTextInfo}>大小：{i.taskStateAdd.materialSize}</text>
                                                <text className={styles.taskTextInfo}>{i.taskStateAdd.taskSeeState}</text>)</div>
                                            </div>
                                          </div>
                                        )
                                      }

                                    })
                                  }
                                </div>


                              </div>
                            )
                          })
                        }


                      </div>
                    </div>

                </TabPane>
                <TabPane tab="课程资料" key="3">
                  <div className={styles.courseChapter}>
                    <div className={styles.sectionContent}>
                      {
                        this.state.chapterList.map((item)=>{
                          return (
                            <div key={item.sectionId} className={styles.sectionContentFlex}>
                              <div>
                                <div className={styles.sectionTitle}>
                                  <div>{item.defaultName}</div>
                                  <div>{item.sectionTitle}</div>
                                </div>
                                {
                                  item.sectionTask.map((i)=>{

                                    if (i.taskType == 'MATERIAL') {

                                      return (
                                        <div key={i.taskId}>
                                          <div className={styles.taskContent}>
                                            <img className={styles.recordPlayIcon} src={materialIcon} alt=""/>
                                            <div className={styles.taskTypeText}>【{i.taskType}】</div>
                                            <div className={styles.taskTitleText}>{i.taskTitle}</div>
                                            <div className={styles.taskStudyText}>
                                              (<text className={styles.taskTextInfo}>格式：{i.materialFormat}</text>
                                              <text className={styles.taskTextInfo}>大小：{i.materialSize}</text>
                                              <text className={styles.taskTextInfo}>{i.taskState}</text>)</div>
                                          </div>
                                        </div>
                                      )
                                    }


                                  })
                                }
                              </div>


                            </div>
                          )
                        })
                      }


                    </div>
                  </div>

                </TabPane>
                <TabPane tab="当前直播" key="4">
                  <div className={styles.courseChapter}>
                    <div className={styles.sectionContent}>
                      {
                        this.state.curLiveList.map((item)=>{

                          return (
                            <div key={item.sectionId} className={styles.sectionContentFlex}>
                              <div >
                                <div className={styles.sectionTitle}>
                                  <div>{item.defaultName}</div>
                                  <div>{item.sectionTitle}</div>
                                </div>
                                {
                                  item.sectionTask.map((i)=>{
                                    {/*console.log("--------i.taskType",i.taskType)*/}
                                    if (i.taskType == 'LIVE' && i.taskStateAdd.taskSeeState=='进行中') {

                                      return (
                                        <div key={i.taskId}>
                                          <div className={styles.taskContent} onClick={()=>{
                                            {/*console.log("-------------i",i)*/}
                                            if (i.isPermission == true) {
                                              let liveVideoUrl = i.liveVideoUrl
                                              this.props.dispatch({type:"courseDetail/goToLive",payload:{liveVideoUrl}})
                                            } else {
                                              notification.open({
                                                message: '温馨提示',
                                                description: '您需要报名才可以观看哦',
                                                duration: 0,
                                                style: {
                                                  marginRight: 500,
                                                  marginTop:100,
                                                },
                                                icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
                                              });
                                            }

                                          }}>
                                            <img className={styles.recordPlayIcon} src={liveIcon} alt=""/>
                                            <div className={styles.taskTypeText}>【直播】</div>
                                            <div className={styles.taskTitleText}>{i.taskTitle}</div>
                                            <div className={styles.taskStudyText}>(

                                              <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyDate}</text>
                                              <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyStartTime}</text>-
                                              <text className={styles.taskTextInfo}>{i.taskStateAdd.taskStudyEndTime}</text>
                                              <text className={i.taskStateAdd.taskSeeState=='进行中'?styles.taskTextInfoRed:styles.taskTextInfo}>{i.taskStateAdd.taskSeeState}</text>)</div>
                                          </div>
                                        </div>
                                      )
                                    }
                                    if (i.taskType == undefined) {
                                      return (
                                        <div>当前没有直播</div>
                                      )
                                    }


                                  })
                                }
                              </div>


                            </div>
                          )
                        })
                      }


                    </div>
                  </div>

                </TabPane>
              </Tabs>
            </div>


          </div>




        </div>




          </Spin>


      </div>

    )
  }

}

export default CourseDetail;
